<template>
  <div data-v-f49a400a class="add-container">
    <div data-v-f49a400a class="center-box">
      <p data-v-f49a400a class="title">新建课程</p>
      <div data-v-f49a400a class="add-wrap">
        <div data-v-f49a400a class="add-item clearfix">
          <label data-v-f49a400a for>课程名称：</label>
          <div
            data-v-f49a400a
            class="el-input el-input--small"
            style="width: 240px; height: 40px; line-height: 40px;"
          >
            <!---->
            <input type="text" autocomplete="off" placeholder="请输入标题" class="el-input__inner" />
            <!---->
            <!---->
            <!---->
            <!---->
          </div>
          <!---->
        </div>
        <div data-v-f49a400a class="add-item clearfix">
          <label data-v-f49a400a for>课程封面：</label>
          <div data-v-f49a400a class="add-upload-box clearfix">
            <div
              data-v-f49a400a
              class="img-wrap"
              style="background-image: url(&quot;https://attachment-center.boxuegu.com/data/attachment/univ/cover/java.png&quot;);"
            ></div>
            <div data-v-f49a400a class="upload-box">
              <p data-v-f49a400a class="upload-btn">
                <span data-v-f49a400a>
                  <i data-v-f49a400a class="el-icon-upload"></i>
                  <span data-v-f49a400a>上传封面</span>
                  <input data-v-f49a400a type="file" accept="image/jpeg, image/png, image/gif" />
                </span>
                <!---->
              </p>
              <div data-v-f49a400a class="tips">
                <p data-v-f49a400a>*作为课程的宣传图，用于课程主页的显示</p>
                <p data-v-f49a400a>*支持jpg、jpeg、gif、png格式</p>
                <p data-v-f49a400a>*文件小于4MB</p>
                <p data-v-f49a400a>*您可以自己上传图片，也可以从下面这些图片中选择使用</p>
              </div>
            </div>
          </div>
        </div>
        <div data-v-f49a400a class="list-box">
          <img
            data-v-f49a400a
            alt
            width="126"
            height="155"
            src="https://attachment-center.boxuegu.com/data/attachment/univ/cover/java.png"
          />
          <img
            data-v-f49a400a
            alt
            width="126"
            height="155"
            src="https://attachment-center.boxuegu.com/data/attachment/univ/cover/android.png"
          />
          <img
            data-v-f49a400a
            alt
            width="126"
            height="155"
            src="https://attachment-center.boxuegu.com/data/attachment/univ/cover/ios.png"
          />
          <img
            data-v-f49a400a
            alt
            width="126"
            height="155"
            src="https://attachment-center.boxuegu.com/data/attachment/univ/cover/c.png"
          />
          <img
            data-v-f49a400a
            alt
            width="126"
            height="155"
            src="https://attachment-center.boxuegu.com/data/attachment/univ/cover/ui.png"
          />
          <img
            data-v-f49a400a
            alt
            width="126"
            height="155"
            src="https://attachment-center.boxuegu.com/data/attachment/univ/cover/python.png"
          />
          <img
            data-v-f49a400a
            alt
            width="126"
            height="155"
            src="https://attachment-center.boxuegu.com/data/attachment/univ/cover/h5.png"
          />
          <img
            data-v-f49a400a
            alt
            width="126"
            height="155"
            src="https://attachment-center.boxuegu.com/data/attachment/univ/cover/dotnet.png"
          />
          <img
            data-v-f49a400a
            alt
            width="126"
            height="155"
            src="https://attachment-center.boxuegu.com/data/attachment/univ/cover/ds.png"
          />
          <img
            data-v-f49a400a
            alt
            width="126"
            height="155"
            src="https://attachment-center.boxuegu.com/data/attachment/univ/cover/code.png"
          />
        </div>
      </div>
      <div data-v-f49a400a class="btn-box">
        <button
          data-v-f49a400a
          type="button"
          class="el-button el-button--default el-button--small"
          style="margin-right: 100px; width: 104px;"
        >
          <!---->
          <!---->
          <span>返回</span>
        </button>
        <button
          data-v-f49a400a
          type="button"
          class="el-button el-button--primary el-button--small"
          style="width: 104px; margin-left: 0px;"
        >
          <!---->
          <!---->
          <span>完成</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},

  methods: {},
};
</script>

<style  scoped>
.add-container {
  background: #f5f7fa;
  min-height: 800px;
}
.add-container .center-box {
    width: 1200px;
    margin: auto;
}
.add-container .title {
    color: #010101;
    font-size: 20px;
    font-weight: 600;
    padding: 22px 22px 22px 67px;
    letter-spacing: 3px;
}
.add-container .center-box .add-wrap {
    background: #fff;
    border-radius: 6px;
    padding: 31px 31px 23px 77px;
}
.add-container .center-box .add-wrap .add-item {
    margin-bottom: 26px;
    position: relative;
}
.add-container .center-box .add-wrap .add-item label {
    float: left;
    height: 40px;
    display: inline-block;
    line-height: 40px;
    letter-spacing: 2px;
    margin-right: 7px;
}
.add-container .center-box .add-wrap .add-item {
    margin-bottom: 26px;
    position: relative;
}
.add-container .center-box .add-wrap .add-item label {
    float: left;
    height: 40px;
    display: inline-block;
    line-height: 40px;
    letter-spacing: 2px;
    margin-right: 7px;
}
.add-container .center-box .add-wrap .add-item .add-upload-box .img-wrap {
    height: 134px;
    width: 100px;
    background: #f5f7fa;
    background-size: 100% 100%;
    float: left;
    margin-right: 34px;
    border: 1px solid #eef3f7;
}
.add-container .center-box .add-wrap .add-item .add-upload-box .upload-box {
    float: left;
}
.add-container .center-box .add-wrap .add-item .add-upload-box .upload-box .upload-btn {
    margin-bottom: 16px;
    height: 31px;
    line-height: 31px;
    position: relative;
}
.add-container .center-box .add-wrap .add-item .add-upload-box .upload-box .upload-btn>span {
    display: inline-block;
    background: linear-gradient(325deg,#4aa4ff,#1058fa);
    width: 120px;
    height: 31px;
    line-height: 31px;
    border-radius: 16px;
    text-align: center;
    color: #fff;
    letter-spacing: 2px;
    cursor: pointer;
}
.add-container .center-box .add-wrap .add-item .add-upload-box .upload-box .upload-btn input {
    width: 120px;
    height: 31px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
.add-container .center-box .add-wrap .add-item .add-upload-box .upload-box .tips p {
    color: #909399;
    font-size: 14px;
    line-height: 22px;
}
.add-container .center-box .add-wrap .list-box {
    width: 990px;
    padding-top: 12px;
}
.add-container .center-box .add-wrap .list-box img {
    margin-right: 66px;
    margin-bottom: 28px;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.add-container .center-box .btn-box[data-v-f49a400a] {
    margin-top: 47px;
    text-align: center;
    padding-bottom: 14px;
}
body .el-button.el-button--small {
    font-size: 12px;
    line-height: 12px;
    padding: 9px 16px;
    border-radius: 3px;
}
body .el-button.el-button--primary {
    color: #fff;
    background-color: #1058fa;
    border-color: #1058fa;
}
</style>